<template>
  <div class="UserList">
    <CrumbsC :arr="arr"></CrumbsC>
    <div class="box">
      <div class="box-center">
        <div class="box-top">
          <div class="left">
            <el-input placeholder="请输入内容"></el-input>
            <el-button type="info">
              <el-icon class="iconfont icon-sousuo"></el-icon>
            </el-button>
            <el-button type="primary" @click="dialogVisible = true">添加用户 </el-button>
            <!-- 添加的input框内容 -->
            <el-dialog v-model="dialogVisible" title="添加用户" width="500">
              <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
              >
                <el-form-item label="用户名" prop="name">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="密码" prop="word">
                  <el-input v-model="ruleForm.word" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="ruleForm.email" />
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                  <el-input v-model="ruleForm.phone" />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>
        <!-- 修改的input内容 -->
        <el-dialog v-model="dialogVisibleT" title="修改用户" width="500">
          <template #footer>
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleFormT"
              :rules="rulesT"
              label-width="auto"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleFormT.name" />
              </el-form-item>
              <el-form-item label="密码" prop="word">
                <el-input v-model="ruleFormT.word" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleFormT.email" />
              </el-form-item>
              <el-form-item label="手机" prop="phone">
                <el-input v-model="ruleFormT.phone" />
              </el-form-item>
            </el-form>

            <div class="dialog-footer">
              <el-button @click="dialogVisibleT = false">取消</el-button>
              <el-button type="primary" @click="dialogVisibleT = false"> 修改 </el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 分配角色权限 -->
        <el-dialog v-model="dialogVisibleTW" title="分配角色" width="500">
          <p style="padding: 20px">当前用户：<span>Lucy</span></p>
          <p style="padding: 20px">当前角色：<span>超级管理员</span></p>
          <el-from :model="ruleFormS" :rules="rulesT">
            <el-form-item label="分配角色" prop="name">
              <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-from>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisibleT = false">取消</el-button>
              <el-button type="primary" @click="dialogVisibleT = false"> 修改 </el-button>
            </div>
          </template>
        </el-dialog>
        <div class="box-bottom" style="min-width: 1000px">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="#" width="50px" />
            <el-table-column prop="username" label="姓名" width="180" />
            <el-table-column prop="email" label="邮箱">
              <template #default="scoped">
                <el-input v-if="scoped.row.flag" v-model="changeList.email"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="mobile" label="电话">
              <template #default="scoped">
                <el-input v-if="scoped.row.flag" v-model="changeList.mobile"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="role_name" label="角色" />
            <el-table-column prop="mg_state" label="状态">
              <template #default="scoped">
                <el-switch v-model="scoped.row.mg_state" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scoped">
                <el-button type="primary" :icon="Edit" circle @click="edit(scoped)"></el-button>
                <el-button type="danger" @click="open" :icon="Delete" circle></el-button>
                <el-button type="warning" @click="dialogVisibleTW = true" :icon="Star" circle />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页样式 -->
        <el-pagination
          style="margin-top: 20px"
          v-model:current-page="params.pagenum"
          v-model:page-size="params.pagesize"
          :page-sizes="[3, 5, 10, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 请求
import { seachUserList, searchUserById, searchUserSore } from '@/api/user'
import { ref, reactive } from 'vue'

const total = ref(0)
const tableData = ref<any[]>([]) //存储数据

const params = reactive({
  query: '',
  pagenum: 1,
  pagesize: 5
})
async function getUserTable() {
  const {
    data: {
      data,
      meta: { status }
    }
  } = await seachUserList(params)
  if (status == 200) {
    tableData.value = data.users.map((item: any) => ({ ...item, flag: false }))
    total.value = data.total
  }
}
getUserTable()

//分页
// 每页条数切换
const handleSizeChange = (val: number) => {
  params.pagesize = val
  getUserTable()
}
const handleCurrentChange = (val: number) => {
  params.pagenum = val
  getUserTable()
}

interface IRow {
  create_time: string
  email: string
  flag: boolean
  id: number
  mg_state: boolean
  mobile: string
  role_name: string
  username: string
}

const changeList = ref({
  id: '',
  mobile: '',
  email: ''
})

// 修改
async function edit({ row }: { row: IRow }) {
  row.flag = !row.flag
  if (!row.flag) {
    const res = await searchUserSore(changeList.value)
    console.log(res, 2222)

    getUserTable()
  } else {
    const {
      data: {
        data,
        meta: { status }
      }
    } = await searchUserById(row.id)

    if (status == 200) {
      const { id, mobile, email } = data
      changeList.value = { id, mobile, email }
    }
  }
}

import CrumbsC from '../../../components/CrumbsC.vue'
import { Edit, Star, Delete } from '@element-plus/icons-vue'
import type { FormRules } from 'element-plus'
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
const dialogVisible = ref(false)
const dialogVisibleT = ref(false)
const dialogVisibleTW = ref(false)
interface RuleForm {
  name: string
  word: string
  email: string
  phone: string
}

//增加用户的input内容
const ruleForm = ref<RuleForm>({
  name: '',
  word: '',
  email: '',
  phone: ''
})

//修改用户的input内容
const ruleFormT = ref<RuleForm>({
  name: '',
  word: '',
  email: '',
  phone: ''
})
//分配角色权限的input内容
const ruleFormS = ref<string[]>(['超级管理员', '管理员', '普通用户'])

//分配角色的input规则

//增加用户的规则
const rules = ref<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  word: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ]
})

//修改用户的规则
const rulesT = ref<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  word: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ]
})
const arr = ref<any[]>([
  { path: '/', title: '首页' },
  { path: '/home', title: '用户管理' },
  { path: '/home/1-1', title: '用户列表' }
])
const value1 = ref(true)

//点击删除按钮触发事件
import { ElMessage, ElMessageBox } from 'element-plus'
function open() {
  ElMessageBox.confirm('此操作将永久删除该用户,是否继续', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}
</script>

<style scoped>
@import url('../../../FontCss/IconFontCss.css');

.UserList {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
}

.UesrAdd {
  width: 500px;
  height: 700px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 600px;
  z-index: 10000;
}
.box {
  width: 90%;
  height: 90%;
  margin: 40px auto;
  background-color: #fff;
}
.box-center {
  width: 90%;
  height: 100%;
  padding: 20px;
}
.box-top {
  display: flex;
}
.left {
  display: flex;
}
.box-bottom {
  margin-top: 20px;
}
</style>
